<template>
    <el-dialog v-model="dialogVisible" title="选择菜单" size="800px" :close-on-click-modal="false" append-to-body
        width="420" class="editDialog" align-center>

        <div class="innerPane">
            <el-input v-model="filterText" placeholder="" />
            <el-tree ref="treeRef" class="filter-tree" :data="menuData" :props="treeProps" default-expand-all
                highlight-current="true" node-key="code" :filter-node-method="filterNode" @check="handleCheck"
                show-checkbox>
            </el-tree>
        </div>
    </el-dialog>
</template>

<script setup lang="js">
import { ref, defineExpose, reactive } from "vue";
import { ElMessage } from "element-plus";
import { reqMenuList, reqRightList, reqRightRoleRel } from "@/utils/requests";
import { tr } from "element-plus/es/locales.mjs";


const emits = defineEmits(["confirm"]);

let dialogVisible = ref(false);

let treeRef = ref();

let filterText = ref("");

let menuData = ref([]);

const initCheckedKeys = ref([]);

const treeProps = {
    children: 'sub',
    label: 'title',
    type: 'type',
    code: 'code',
    id: 'id'
};

const initialForm = () => ({
    roleId: null,
    roleCode: ''
})

let searchForm = reactive(initialForm());

const openDialog = (rowData) => {
    dialogVisible.value = true;

    searchForm.roleId = rowData.id;
    searchForm.roleCode = rowData.roleCode;

    search();

    requestCheceked();
};


const filterNode = (value, data) => {
    if (!value) return true;
    return data.menuName.indexOf(value) !== -1;
};
const handleCheck = (node, { checkedNodes, checkedKeys }) => { 
    let fromData = {
        isAdd: 1,
        roleCode: searchForm.roleCode,
        targetCode: "B.MENU",
        targetVals: "",
    }


    let toSet = new Set(checkedNodes.filter(v => v.type === 2).map(({ code }) => code));

    let fromSet = new Set(initCheckedKeys.value);

    let removeArr = initCheckedKeys.value.filter(v => !toSet.has(v));
    if (removeArr.length > 0) {
        fromData.isAdd = 0;
        fromData.targetVals = removeArr.join(',');
    }

    let insertArr = checkedKeys.filter(v => !fromSet.has(v));
    if (insertArr.length > 0) {
        fromData.isAdd = 1;
        fromData.targetVals = insertArr.join(',');
    }
 

    // 1. 删掉 defaultCheckedKeys 里不在 checkedKeys 中的元素 => 删除操作
    initCheckedKeys.value.splice(0, initCheckedKeys.value.length,
        ...initCheckedKeys.value.filter(v => toSet.has(v)));


    // 2. 补上 checkedKeys 有但 defaultCheckedKeys 没有的元素 =》 新增操作
    initCheckedKeys.value.push(...checkedKeys.filter(v => v.type === 2 && !fromSet.has(v)));

    reqRightRoleRel(fromData).then((res) => {
         ElMessage.success("权限更新成功");
    }).catch((err) => {
        ElMessage.error(err.message || "请求失败");
    }); 

};

const search = () => {
    reqMenuList(searchForm).then((res) => {
        menuData.value = res;
    }).catch((err) => {
        ElMessage.error(err.message || "请求失败");
    });

};

const requestCheceked = () => {
    reqRightList({ objCode: "SYS.ROLE", objValue: searchForm.roleCode }).then((res) => {
        initCheckedKeys.value = res.map(({ rightValue }) => rightValue);

        treeRef.value.setCheckedKeys(initCheckedKeys.value);

    }).catch((err) => {
        ElMessage.error(err.message || "请求失败");
    });
};



defineExpose({ openDialog });
</script>

<style scoped></style>